<template>
  <div>
    <div class="title">
      <el-row>
        <el-col :span="1" style="width: 50px;">
          <span style="color:#757575;">位置 : </span>
        </el-col>
        <el-col :span="20">
          <span class="hand">角色管理</span>
        </el-col>
      </el-row>
    </div>
    <div class="rolelist">
      <el-row type="flex" justify="center" style="padding-bottom: 30px;padding-top: 30px;">
        <el-col :span="20">
          <el-row>
            <el-col :md="8" :lg='8' :xl="6" v-for="(item,index) in list" :key="index" class="changecolor">
              <div class="box" v-if="item.sysRoles.length <= 2">
                <el-row class="roletitle">
                  <el-col :span="10" :offset="1">
                    <p>{{item.name}}</p>
                  </el-col>
                  <el-col :span="2" :offset="10">
                    <el-dropdown :hide-on-click="false" class="drop" trigger="click">
                        <span class="el-dropdown-link">
                          <i class="iconfont icon-dian1" style="font-size: 20px;"></i>
                        </span>
                      <el-dropdown-menu slot="dropdown" class="dropcheck">
                        <el-dropdown-item @click.native="edit(item.name)"><span>编辑</span>
                          <div class="bot"></div>
                        </el-dropdown-item>
                        <el-dropdown-item @click.native="deletedata(item.name)">
                          <span>删除</span>
                          <div class="bot"></div>
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-col>
                </el-row>
                <el-row type="flex" justify="center" class="icontop">
                  <el-col :span="22">
                    <el-row>
                      <el-col :span="12" v-for="(item1,index1) in item.sysRoles" :key="index1">
                        <div class="pic" v-if="item1.icon">
                          <img :src="item1.icon">
                        </div>
                        <div class="content">
                          <p class="text">{{item1.name}}</p>
                        </div>
                      </el-col>
                    </el-row>
                  
                  </el-col>
                </el-row>
              </div>
              <div class="box" v-if="item.sysRoles.length > 2">
                <el-row class="roletitle">
                  <el-col :span="10" :offset="1">
                    <p>{{item.name}}</p>
                  </el-col>
                  <el-col :span="2" :offset="10">
                    
                    <el-dropdown :hide-on-click="false" class="drop" trigger="click">
                        <span class="el-dropdown-link">
                          <i class="iconfont icon-dian1" style="font-size: 20px;"></i>
                        </span>
                      <el-dropdown-menu slot="dropdown" class="dropcheck">
                        <el-dropdown-item @click.native="edit(item.name)"><span>编辑</span>
                          <div class="bot"></div>
                        </el-dropdown-item>
                        <el-dropdown-item @click.native="deletedata(item.name)">
                          <span>删除</span>
                          <div class="bot"></div>
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-col>
                </el-row>
                <el-row type="flex" justify="center" class="icontop1">
                  <el-col :span="22">
                    <el-row>
                      <el-col :span="8" class="content five" v-for="(item1,index1) in item.sysRoles" :key="index1">
                        <div class="pic" style="background-color:#3fc6c3;" v-if="item1.icon">
                          <img :src="item1.icon">
                        </div>
                        <div class="content">
                          <p class="text">{{item1.name}}</p>
                        </div>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :md="8" :lg='8' :xl="6">
              <div class='newadd'>
                <div class="addicon" @click="addlist">
                  <el-row>
                    <el-col>
                      <i class="el-icon-circle-plus-outline"></i>
                    </el-col>
                    <el-col>
                      <p>新建角色</p>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-col>
      
      </el-row>
    </div>
    
    <el-dialog
      title="新增"
      :visible.sync="dialogVisible"
      width="415px"
      :before-close="addClose"
      class="addP contentR workrecord1 addroledialog"
    >
      <div style="height: 300px;">
        <el-scrollbar style="height: 100%;width: 330px;">
          <el-form label-position="top" :rules="addrule" ref="addform" :model="addrole">
            <el-form-item label="角色名称" prop="name">
              <el-input placeholder="请输入角色名称" style="width: 274px" v-model="addrole.name"></el-input>
            </el-form-item>
            <el-col v-for="(item,index) in addrole.sysRoles" :key="index">
              <el-form-item
                :prop="'sysRoles.' + index + '.name'"
                :rules="typeRules"
              >
                <el-col>
                  <el-col>
                    <span style="color:#333;"><span style='color:#F56C6C;'>*</span>角色类别</span>
                    <i class='el-icon-circle-plus' style="color:#1198ff;font-size: 12px;cursor: pointer;" v-if="index == 0"
                       @click="addcust()"></i>
                    <span style="color:#1198ff;font-size: 14px;cursor: pointer;"
                          @click="addcust()" v-if="index == 0">添加</span>
    
                    <i class='el-icon-circle-close' style="color:#f41f1e;font-size: 12px;cursor: pointer;"
                       v-if="index !== 0"
                       @click="delcust(index)"></i>
                    <span style="color:#f41f1e;font-size: 14px;cursor: pointer;"
                          @click="delcust(index)" v-if="index !== 0">删除</span>
                  </el-col>
                  <el-input placeholder="请输入角色类别"
                            style="width: 274px" v-model.trim="item.name">
                  </el-input>
                </el-col>
              </el-form-item>
              <el-form-item
                label="类型"
                :prop="'sysRoles.' + index + '.type'"
                :rules="Type1Rules"
              >
                <el-col>
                  <el-input placeholder="请输入类型"
                            style="width: 274px" v-model.trim="item.type">
                  </el-input>
                </el-col>
              </el-form-item>
              <el-form-item
                label="角色编号"
                :prop="'sysRoles.' + index + '.roleNum'"
                :rules="roleNumRules"
              >
                <el-col>
                  <el-input placeholder="请输入角色编号"
                            style="width: 274px" v-model.trim="item.roleNum">
                  </el-input>
                </el-col>
              </el-form-item>
              <el-form-item
                label="角色图标"
                :prop="'sysRoles.' + index + '.icon'"
                :rules="iconRules"
              >
                <el-col>
                  <el-select v-model.trim="item.icon" style="width :274px">
                    <el-option v-for="(item2,index2) in piclist" :key="index2" :value="item2.value" :label="item2.label">
                      <span>{{item2.label}}</span>
                      <img :src="item2.imgurl" alt="" style="float: right;margin-right: 5px;">
                    </el-option>
                  </el-select>
                </el-col>
              </el-form-item>
       
            </el-col>
          </el-form>
        </el-scrollbar>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="sure" round :disabled="adddis" @click="addsend('addform')">确 定</el-button>
        <el-button round @click="addClose" class="cancel">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="修改"
      :visible.sync="editdialogVisible"
      width="415px"
      :before-close="editClose"
      class="addP contentR workrecord1 addroledialog"
    >
      <div style="height: 300px;">
        <el-scrollbar style="height: 100%;width: 330px;">
          <el-form label-position="top" ref="editroleform" :model="editrole" :rules="editrule">
            <el-form-item label="角色名称" prop="name">
              <el-input placeholder="请输入角色名称" style="width: 274px" v-model.trim="editrole.name"></el-input>
            </el-form-item>
  
            <el-col v-for="(item,index) in editrole.sysRoles" :key="index">
              <el-form-item
                :prop="'sysRoles.' + index + '.name'"
                :rules="typeRules"
              >
                <span style="color:#333;"><span style='color:#F56C6C;'>*</span> 角色类别</span>
                <i class='el-icon-circle-plus' style="color:#1198ff;font-size: 12px;cursor: pointer;" v-if="index == 0"
                   @click="editcust()"></i>
                <span style="color:#1198ff;font-size: 14px;cursor: pointer;"
                      @click="editcust()" v-if="index == 0">添加</span>
  
                <i class='el-icon-circle-close' style="color:#f41f1e;font-size: 12px;cursor: pointer;"
                   v-if="index !== 0"
                   @click="editdelcust(index,item.id)"></i>
                <span style="color:#f41f1e;font-size: 14px;cursor: pointer;"
                      @click="editdelcust(index,item.id)" v-if="index !== 0">删除</span>
                <el-col>
                  <el-input placeholder="请输入角色类别"
                            style="width: 274px" v-model.trim="item.name">
                  </el-input>
                </el-col>
              </el-form-item>
              <el-form-item
                label="类型"
                :prop="'sysRoles.' + index + '.type'"
                :rules="Type1Rules"
              >
                <el-col>
                  <el-input placeholder="请输入类型"
                            style="width: 274px" v-model.trim="item.type">
                  </el-input>
                </el-col>
              </el-form-item>
              <el-form-item
                label="角色编号"
                :prop="'sysRoles.' + index + '.roleNum'"
                :rules="roleNumRules"
              >
                <el-col>
                  <el-input placeholder="请输入角色编号"
                            style="width: 274px" v-model.trim="item.roleNum">
                  </el-input>
                </el-col>
              </el-form-item>
              <el-form-item
                label="角色图标"
                :prop="'sysRoles.' + index + '.icon'"
                :rules="iconRules"
              >
                <el-col>
                  <el-select v-model.trim="item.icon" style="width :274px">
                    <el-option v-for="(item2,index2) in piclist" :key="index2" :value="item2.value" :label="item2.label">
                      <span>{{item2.label}}</span>
                      <img :src="item2.imgurl" alt="" style="float: right;margin-right: 5px;">
                    </el-option>
                  </el-select>
                </el-col>
              </el-form-item>
  
            </el-col>
          </el-form>
        </el-scrollbar>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="sure" round :disabled="editdis" @click="editsend('editroleform')">确 定</el-button>
        <el-button round @click="editClose" class="cancel">取 消</el-button>
      </span>
    </el-dialog>
    
    
    <el-dialog
      title="删除角色"
      :visible.sync="deletedialogVisible"
      width="30%"
      :before-close="deleteClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;"><span
          style="font-size: 16px;color: #333;margin-left: 12px;">确定删除该角色吗？</span></i>
      </div>
      <span slot="footer" class="dialog-footer">
           <el-button class="sure" round @click="deletesend">确 定</el-button>
    <el-button round @click="deleteClose" class="cancel">取 消</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<script>
  import axios from 'axios'
  
  export default {
    name: 'rolemanage',
    data() {
      // 角色类别
      var checktype = (rule, value, callback) => {
        var re = /^[\u4e00-\u9fa5]+$/;
        setTimeout(() => {
          if (!re.test(value)) {
            callback(new Error('请输入汉字'));
          } else {
            callback();
          }
        }, 1000);
      };
      //类型
      var checkType = (rule, value, callback) => {
        var re = /^[\u4e00-\u9fa5]+$/;
        setTimeout(() => {
          if (!re.test(value)) {
            callback(new Error('请输入汉字'));
          } else {
            callback();
          }
        }, 1000);
      };
      // 角色编号
      var checkroleNum = (rule, value, callback) => {
        var re = /^\d+$/;
        setTimeout(() => {
          if (!re.test(value)) {
            callback(new Error('请输入数字'));
          } else {
            callback();
          }
        }, 1000);
      };
      return {
        value1: 0,
        piclist : [
          {
            imgurl: '../../../static/image/leader1.png',
            value: '../../../static/image/leader.png',
            label : '组长'
          },
          {
            imgurl: '../../../static/image/member1.png',
            value: '../../../static/image/member.png',
            label : '组员'
          }
        ],
        list: [],
        typeRules: [
          {required: true, message: '请输入角色类别', trigger: 'blur'},
          {validator: checktype, trigger: 'blur'}
        ],
        Type1Rules:[
          {required: true, message: '请输入类型', trigger: 'blur'},
          {validator: checkType, trigger: 'blur'}
        ],
        roleNumRules:[
          {required: true, message: '请输入角色编号', trigger: 'blur'},
          {validator: checkroleNum, trigger: 'blur'}
        ],
        iconRules: [
          {required: true, message: '请选择角色图标', trigger: 'change'}
        ],
        dialogVisible: false,
        deletedialogVisible: false,
        addrole: {
          name: '',
          sysRoles: [
            {
              id : '',
              name :'',
              type :'',
              roleNum : '',
              icon : ''
            }
          ]
        },
        addrule: {
          'name': [
            {required: true, message: '请输入角色名称', trigger: 'blur'}
          ]
        },
        adddis: false,
        editdialogVisible: false,
        editrole: {
          name: '',
          sysRoles:[]
        },
        editrule: {
          'name': [
            {required: true, message: '请输入角色名称', trigger: 'blur'}
          ]
        },
        editdis: false,
        repeat1: '',
        delname : '',
        num : 1
      }
    },
    created() {
      this.selectAllRoles();
    },
    methods: {
      //获取全部的角色
      selectAllRoles() {
        axios.post(this.url + '/system/role/selectAllRoles').then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.list = res.data.data;
          }
        })
      },
      addlist() {
        this.addrole = {
          name: '',
          sysRoles: [
            {
              id : '',
              name :'',
              type :'',
              roleNum : '',
              icon : ''
            }
          ]
        };
        this.num = 1;
        document.documentElement.style.overflow = 'hidden';
        this.dialogVisible = true;
      },
      edit(name) {
        axios.post(this.url + '/system/role/getRoles',{
          roleType : name
        }).then(res => {
          this.unlogin(res.data.code);
          if(res.data.code == 200){
            this.editrole.name = name;
            this.editrole.sysRoles = res.data.data;
            this.num = this.editrole.sysRoles.length;
          }
        })
        this.editdialogVisible = true;
        document.documentElement.style.overflow = 'hidden';
      },
      addcust() {
          this.num++;
          if(this.num <= 6){
            this.addrole.sysRoles.push({
              id : '',
              name :'',
              type :'',
              roleNum : '',
              icon : ''
            })
          }else{
          this.$notify.info({
            title: '消息',
            message: "每个角色类别下最多添加6个角色!",
            duration: 10000
          });
        }
      },
      editcust() {
        this.num++;
        if(this.num <= 6) {
          this.editrole.sysRoles.push({
            id: '',
            name: '',
            type: '',
            roleNum: '',
            icon: ''
          })
        }else{
          this.$notify.info({
            title: '消息',
            message: "每个角色类别下最多添加6个角色!",
            duration: 10000
          });
        }
      },
      delcust(index) {
        this.addrole.sysRoles.splice(index, 1);
        this.num = this.addrole.sysRoles.length;
      },
      editdelcust(index,id) {
        axios.post(this.url + '/system/role/delRole',{
          id : id
        }).then(res => {
          if(res.data.code == 200){
            this.editrole.sysRoles.splice(index, 1);
            this.num = this.editrole.sysRoles.length;
          }
        })
      },
      deletedata(name) {
        this.delname = name;
        this.deletedialogVisible = true;
        document.documentElement.style.overflow = 'hidden';
      },
      addClose() {
        this.num = 1;
        this.addrole = {
          name: '',
          sysRoles: [
            {
              id : '',
              name :'',
              type :'',
              roleNum : '',
              icon : ''
            }
          ]
        };
        this.$refs.addform.resetFields();
        this.dialogVisible = false;
        document.documentElement.style.overflow = 'auto';
      },
      addsend(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.adddis = true;
            axios.post(this.url + '/system/role/addRole',{
              name : this.addrole.name,
              sysRoles : this.addrole.sysRoles
            }).then(res => {
              this.unlogin(res.data.code);
              if(res.data.code == 200){
                this.adddis = false;
                this.addrole = {
                  name: '',
                  sysRoles: [
                    {
                      id : '',
                      name :'',
                      type :'',
                      roleNum : '',
                      icon : ''
                    }
                  ]
                };
                this.num = 1;
                this.$refs.addform.resetFields();
                this.selectAllRoles();
                this.dialogVisible = false;
                document.documentElement.style.overflow = 'auto';
              }
            })
          }
        })
      },
      deletesend() {
        axios.post(this.url + '/system/role/delRoles',{
          roleType : this.delname
        }).then(res => {
          this.unlogin(res.data.code);
          if(res.data.code == 200){
            this.delname = '';
            this.selectAllRoles();
            this.deletedialogVisible = false;
            document.documentElement.style.overflow = 'auto';
          }
        })
      },
      deleteClose() {
        this.delname = '';
        this.deletedialogVisible = false;
        document.documentElement.style.overflow = 'auto';
      },
      editsend(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.editdis = true;
            axios.post(this.url + '/system/role/addRole', {
              name : this.editrole.name,
              sysRoles : this.editrole.sysRoles
            }).then(res => {
              this.unlogin(res.data.code);
              if(res.data.code == 200){
                this.num = 1;
                this.editdis = false;
                this.selectAllRoles();
                this.$refs.editroleform.resetFields();
                this.editdialogVisible = false;
                document.documentElement.style.overflow = 'auto';
              }
            })
          }
        })
        
      },
      editClose() {
        this.num = 1;
        this.$refs.editroleform.resetFields();
        this.editdialogVisible = false;
        document.documentElement.style.overflow = 'auto';
      },
    },
  }
</script>
<style scoped>
  .title {
    background-color: #fff;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    padding-left: 20px;
    margin-top: 6px;
    margin-bottom: 6px;
  }
  
  .rolelist {
    min-height: 700px;
    background-color: #fff;
  }
  
  .box {
    width: 337px;
    height: 180px;
    border: 1px solid #ccc;
    margin-bottom: 30px;
  }
  
  .box:hover {
    border-color: transparent;
    box-shadow: 0px 0px 10px #ccc;
  }
  
  .roletitle {
    padding-top: 20px;
  }
  
  .roletitle p {
    color: #0b4d9a;
    font-weight: 700;
  }
  
  .icontop {
    margin-top: 56px;
  }
  
  .icontop1 {
    margin-top: 25px;
  }
  
  .content {
    display: inline-block;
    height: 40px;
    line-height: 40px;
  }
  
  .content i {
    vertical-align: middle;
    font-size: 40px;
  }
  
  .content p {
    display: inline-block;
  }
  
  .one {
    color: #1198ff;
  }
  
  .text {
    color: #757575;
  }
  
  .pic {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    background-color: #119aff;
  }
  
  .pic img {
    margin-top: 8px;
  }
  
  .five {
    margin-bottom: 16px;
  }
  
  .newadd {
    width: 337px;
    height: 180px;
    border: 1px dashed #ccc;
    position: relative;
  }
  
  .addicon {
    width: 65px;
    height: 55px;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: 14px;
    text-align: center;
    color: #cdcdcd;
    cursor: pointer;
  }
  
  .addicon i {
    font-size: 22px;
    margin-bottom: 18px;
  }
  
  .bot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    border: 1px solid #ccc;
    display: inline-block;
    margin-left: 30px;
  }
  
  .addroledialog .el-icon-picture {
    font-size: 14px;
    color: #00a4ff;
  }
  
  .hand {
    color: #757575;
  }
</style>
